<!DOCTYPE html>
<!-- saved from url=(0057)http://wx.zhongfubang.com/family_choose.html?productId=3 -->
<html>

	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

		<title>选择参加人</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
		<link href="./css/mui.min.css" rel="stylesheet">
		<link href="./css/form2.css" rel="stylesheet">
		<style type="text/css">
			.mui-checkbox input[type=checkbox]:checked:before,
			.mui-radio input[type=radio]:checked:before {
				color: rgb(255, 91, 55) !important
			}
		</style>
		<style type="text/css" abt="234"></style>
		<style type="text/css"></style>
		<script>
			//console.log('a')
		</script>
		<script>
			//remove 17173 video ad
			doAdblock();

			function doAdblock() {
				(function() {
					function A() {}
					A.prototype = {
						rules: {
							'17173_in': {
								'find': /http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/PreloaderFile(Customer)?\.swf/,
								'replace': "http://swf.adtchrome.com/17173_in_20150522.swf"
							},
							'17173_out': {
								'find': /http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/PreloaderFileFirstpage\.swf/,
								'replace': "http://swf.adtchrome.com/17173_out_20150522.swf"
							},
							'17173_live': {
								'find': /http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/Player_stream(_firstpage)?\.swf/,
								'replace': "http://swf.adtchrome.com/17173_stream_20150522.swf"
							},
							'17173_live_out': {
								'find': /http:\/\/f\.v\.17173cdn\.com\/(\d+\/)?flash\/Player_stream_(custom)?Out\.swf/,
								'replace': "http://swf.adtchrome.com/17173.out.Live.swf"
							}
						},
						_done: null,
						get done() {
							if(!this._done) {
								this._done = new Array();
							}
							return this._done;
						},
						addAnimations: function() {
							var style = document.createElement('style');
							style.type = 'text/css';
							style.innerHTML = 'object,embed{\
                -webkit-animation-duration:.001s;-webkit-animation-name:playerInserted;\
                -ms-animation-duration:.001s;-ms-animation-name:playerInserted;\
                -o-animation-duration:.001s;-o-animation-name:playerInserted;\
                animation-duration:.001s;animation-name:playerInserted;}\
                @-webkit-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\
                @-ms-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\
                @-o-keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}\
                @keyframes playerInserted{from{opacity:0.99;}to{opacity:1;}}';
							document.getElementsByTagName('head')[0].appendChild(style);
						},
						animationsHandler: function(e) {
							if(e.animationName === 'playerInserted') {
								this.replace(e.target);
							}
						},
						replace: function(elem) {
							if(this.done.indexOf(elem) != -1) return;
							this.done.push(elem);
							var player = elem.data || elem.src;
							if(!player) return;
							var i, find, replace = false;
							for(i in this.rules) {
								find = this.rules[i]['find'];
								if(find.test(player)) {
									replace = this.rules[i]['replace'];
									if('function' === typeof this.rules[i]['preHandle']) {
										this.rules[i]['preHandle'].bind(this, elem, find, replace, player)();
									} else {
										this.reallyReplace.bind(this, elem, find, replace)();
									}
									break;
								}
							}
						},
						reallyReplace: function(elem, find, replace) {
							elem.data && (elem.data = elem.data.replace(find, replace)) || elem.src && ((elem.src = elem.src.replace(find, replace)) && (elem.style.display = 'block'));
							var b = elem.querySelector("param[name='movie']");
							this.reloadPlugin(elem);
						},
						reloadPlugin: function(elem) {
							var nextSibling = elem.nextSibling;
							var parentNode = elem.parentNode;
							parentNode.removeChild(elem);
							var newElem = elem.cloneNode(true);
							this.done.push(newElem);
							if(nextSibling) {
								parentNode.insertBefore(newElem, nextSibling);
							} else {
								parentNode.appendChild(newElem);
							}
						},
						init: function() {
							
						}
					};
					new A().init();
				})();
			}
		</script>
		<style type="text/css">
			object,
			embed {
				-webkit-animation-duration: .001s;
				-webkit-animation-name: playerInserted;
				-ms-animation-duration: .001s;
				-ms-animation-name: playerInserted;
				-o-animation-duration: .001s;
				-o-animation-name: playerInserted;
				animation-duration: .001s;
				animation-name: playerInserted;
			}
			
			@-webkit-keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			@-ms-keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			@-o-keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
			
			@keyframes playerInserted {
				from {
					opacity: 0.99;
				}
				to {
					opacity: 1;
				}
			}
		</style>
	</head>

	<body>
		<header class="mui-bar mui-bar-nav bgcolor">
			<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
			<h1 class="mui-title">选择参加人</h1>
		</header>
		<div id="app" class="mui-content">
			<div class="mui-card">
				<div class="mui-card-header  mui-card-media">
					<div class="mui-media-body">
						<div class="mui-row">
							<p><span class="textcolor">*</span>本计划加入年龄为<span class="textcolor">出生满28天—65周岁</span></p>
						</div>
						<div class="mui-row">
							<p><span class="textcolor">*</span>我们会严格遵守法律法规，保护您的个人信息和隐私</p>
						</div>
					</div>
				</div>
				<div class="mui-card-content">
					<div class="card1">
						<div id="familylist" class="card2" v-for="family in family_list">
							<div data-id="91" class="mui-input-row mui-radio mui-left"><label>{{family.realName}}</label> <input name="familyId" :value="family.id" v-model="family_id" type="radio"></div>
						</div>
					</div>
					<a href="http://wx.zhongfubang.com/family_choose.html?productId=3#modal1">
						<div class="add-card bgcolor">
							<div class="mui-row">
								<p><span class="mui-icon mui-icon-plusempty"></span> 添加家人
								</p>
							</div>
						</div>
					</a>
					<div class="agree-card">
						<p><span class="mui-icon mui-icon-checkmarkempty"></span> 我已经阅读并同意 <span onclick="location.href=&#39;article/healthchengnuo.html&#39;;" class="textcolor health">《健康承诺》</span>和<span onclick="location.href=&#39;article/vipgongyue.html&#39;;" class="textcolor tips">《会员公约》</span></p>
					</div>
					<div class="mui-button-row"><button type="button" class="mui-btn mui-btn-primary mui-btn-outlined" onclick="next();">下一步</button></div>
				</div>
			</div>
			<div id="modal1" class="mui-popover" style="display: none; top: 142px; left: 5px;">
				<div class="modal-content">
					<form class="mui-input-group" id="addFamilyForm">
						<div class="mui-row modal-title-row"><span class="modal-title">填写您的家人信息</span></div>
						<div class="mui-input-row"><input type="text" placeholder="您的家人的真实姓名" id="name"></div>
						<div class="mui-input-row">
							<select id="relationShip">
								<option value="1">父亲</option>
								<option value="2">母亲</option>
								<option value="3">妻子</option>
								<option value="4">儿子</option>
								<option value="5">女儿</option>
								<option value="6">其他</option>
							</select>
						</div>
						<div class="mui-input-row"><input type="text" placeholder="身份证号码" id="idCode"></div>
						<div class="mui-button-row modal-btn-row"><button type="button" @click="add_family();" class="mui-btn mui-btn-warning mui-btn-outlined mui-pull-left textcolor">确认</button> <button type="button" onclick="mui(&#39;#modal1&#39;).popover(&#39;hide&#39;);" class="mui-btn mui-btn-warning mui-btn-outlined mui-pull-right textcolor">取消</button></div>
						<div class="mui-row hr-row"><span></span></div>
					</form>
				</div>
				<div class="mui-popover-arrow" style="left:6px"></div>
			</div>
		</div>

		<!--//弹框-->
		<script src="./js/mui.js"></script>
		<script src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript" src="./js/vue.min.js"></script>
		<script type="text/javascript" src="./js/common.js"></script>
		<script type="text/javascript">
			mui.init({
				swipeBack: true //启用右滑关闭功能
			});
			var appUser;
			var vue = new Vue({
				el: "#app",
				data: {
					productId: $.getUrlParam('productId'),
					family_list: [],
					family_id:''
				},
				methods: {
					add_family: function(event) {
						var name = $("#name").val();
						var idCode = $("#idCode").val();
						var relationship = $("#relationShip").val();

						if(name == "") {
							mui.toast("请输入真实姓名");
							return false;
						}
						if(idCode == "") {
							mui.toast("请输入身份证");
							return false;
						}
						if(relationship == "") {
							mui.toast("请选择关系");
							return false;
						}

						var url = root + 'myCenter/addFamily';
						mui.post(url, {
								appUserId: appUser.id,
								realName: name,
								idCode: idCode,
								relationShip: relationship
							},
							function(data) {
								var status = data.status;
								if(status == "success") {
									mui.toast("添加成功");
									get_family_list();
									mui('#modal1').popover('hide');
									$("#addFamilyForm")[0].reset();
								}
								if(status == "failed") {
									mui.toast(data.msg);
								}
							}, 'json'
						);
					},
					select_family_id: function(event) {
						var self = event.currentTarget;
						this.family_id = self.getAttribute('data-id');

					}
				}
			})
			
			function next(){
				
				if(isNull(vue.family_id)) {
							mui.toast("请选择要加入计划的家人");
							return false;
						}
						var url = root + "index/check_exist_order";
						$.post(url, {
								productId: vue.productId,
								applyPeopleId: vue.family_id,
								type:2
							},
							function(data) {
								if(data.status=="success"){
									var urlResult = ajaxAction(root+'wechat/getAuthorizeURL?type=2&applyPeopleId='+vue.family_id+'&productId='+vue.productId+'&appUserId='+appUser.id,null);
									/*mui.openWindow('yiyuan_buy.html?selectType=2&applyPeopleId='+vue.family_id+'&productId='+vue.productId, '', {});
									mui.openWindow('yiyuan_buy.html?selectType=2&applyPeopleId='+vue.family_id+'&productId='+vue.productId, '', {});*/
									debugger;
									console.log(urlResult.data);
									window.location.href=urlResult.data;
									//mui.openWindow(urlResult.data,'',{});
								}else{
									mui.toast(data.msg);
								}
							}, 'json'
						);
					}
				
			
			
			window.onload = load();

			function load() {
				//get_family_list();
				appUser=JSON.parse(localStorage.appUser);
				if(isNull(appUser)){
					window.location.href="login.html";
					return;
				}
				get_family_list();
			}

			function get_family_list() {
				var url = root + "index/selectFamilyList";
				mui.get(url, {
						appUserId: appUser.id
					},
					function(data) {
						vue.family_list = data.data;
					}, 'json'
				);
			}

			function addFamilyInfo() {
				var name = document.getElementById("familyname").value;
				var relation = document.getElementById("relation").value;
				var idcard = document.getElementById("idcard").value;
				if(checkName(name) && checkRelation(relation) && checkIdcard(idcard)) {
					var url = root + 'app/home/addFamilyToapply';
					mui.post(url, {
						name: name,
						relation: relation,
						idcard: idcard,
						userID: user_id
					}, function(data) {

						var result = data.code;

						if(result == 0) {
							mui.alert("添加失败");
						} else if(result == 1) {
							mui("#modal1").popover('hide');
							getFamilysByuserId();
						} else if(result == 2) {
							mui.alert("该家人已经注册了");
						} else {
							mui.alert("请输入正确的身份证号码");
						}
					}, 'json');
				} else {
					mui.toast('请按要求填写信息');
				}

			}
			
		</script>

	</body>

</html>